<template>
  <div class="InverterMonitor">
    <div class="leftbox">
      <NocheckTree @handleNodeClicks="handleNodeClicks"></NocheckTree>
    </div>
    <div class="rightbox">
      <div class="righttopbo">
        <div class="img">
          <img src="../../../../assets/Photovoltaic/guangfu.jpeg" alt="" />
        </div>
        <div class="xiangqing">
          <div class="alitobox">
            <div>装机容量</div>
            <div>{{ entityvalue.capacity }}kW</div>
          </div>
          <div class="alitobox">
            <div>逆变器</div>
            <div>{{ entityvalue.count }}台</div>
          </div>
          <div class="alitobox">
            <div>累计发电量</div>
            <div>{{ entityvalue.totalPowerGeneration }}kWh</div>
          </div>
          <div class="alitobox">
            <div>本月发电量</div>
            <div>{{ entityvalue.monthPowerGeneration }}kWh</div>
          </div>
          <div class="alitobox">
            <div>当前功率</div>
            <div>{{ entityvalue.currentPower }}kW</div>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="rightbodybox">
        <div class="titlea">
          <div class="click">
            <!-- <i :style="{color:isshow?'#007cee':''}" @click="toimg" class="iconfont icon-zhuzhuangtutubiao"></i>
            <i :style="{color:!isshow?'#007cee':''}" @click="totab" class="iconfont icon-biaoge"></i> -->
          </div>
          <div>
            <span><i class="iconfont icon-zhengchang"></i> 正常</span>
            <span><i class="iconfont icon-lingdang"></i> 告警</span>
            <span><i class="iconfont icon-lixian1"></i> 离线</span>
          </div>
        </div>
        <div class="xunandtab">
          <div class="xunhuan libinaqixunhuan" ref="littlexunhuans">
            <div v-if="!xunhuanlist.length" class="empty">
              <el-empty description="暂无数据" :image-size="200"></el-empty>
            </div>
            <div
              class="libinaqilitt"
              v-for="(item, index) in xunhuanlist"
              :key="index"
            >
              <div class="icimg">
                <div>
                  <i
                    :style="{
                      color:
                        item.status == 1
                          ? '#3ecc6c'
                          : item.status == '2'
                          ? '#e3b11b'
                          : '#000000'
                    }"
                    class="iconfont icon-F-fengjinibianqi"
                  ></i>
                </div>
                <div class="typename">{{ item.name }}</div>
              </div>
              <div class="gonglv">
                <div class="key">
                  <div>功率:</div>
                  <div>日电量:</div>
                  <div>总电量:</div>
                </div>
                <div class="key value">
                  <div>{{ item.power?.toFixed(0) }} kW</div>
                  <div>{{ item.dayPowerGeneration?.toFixed(0) }} kWh</div>
                  <div>{{ item.totalPowerGeneration?.toFixed(0) }} kWh</div>
                </div>
              </div>
            </div>
          </div>
          <div class="xunhuan">
            <el-table
              :span-method="objectSpanMethod"
              border
              :header-cell-style="{
                'text-align': 'center',
                background: '#f5f5f5'
              }"
              v-loading="loading"
              style="width: 100%"
              :data="tableData"
            >
              <template slot="empty">
                <el-empty description="暂无数据"></el-empty>
              </template>
              <el-table-column
                prop="status"
                fixed
                width="70"
                align="center"
                label="状态"
              >
                <template #default="{ row }">
                  <span>
                    <i
                      v-if="row.status == '1'"
                      class="iconfont icon-zhengchang"
                      style="color: #3ecc6c"
                    ></i>
                    <i
                      v-else-if="row.status == '3'"
                      class="iconfont icon-lingdang"
                      style="font-size: 18px; color: #e3b11b"
                    ></i>
                    <i
                      v-else
                      class="iconfont icon-lixian1"
                      style="font-size: 18px"
                    ></i>
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="name" fixed width="140" label="逆变器名称">
              </el-table-column>
              <el-table-column prop="model" label="型号"> </el-table-column>
              <el-table-column
                prop="power"
                width="120"
                align="right"
                label="实时功率(kW)"
              >
              </el-table-column>
              <el-table-column
                prop="dayPowerGeneration"
                width="140"
                align="right"
                label="当日发电量(kWh)"
              >
              </el-table-column>
              <el-table-column
                prop="dayEffectiveHour"
                width="120"
                align="right"
                label="当日等效(h)"
              >
              </el-table-column>
              <el-table-column prop="typename" width="120" label="电压/电流">
              </el-table-column>
              <el-table-column
                v-for="(item, index) in 24"
                :key="index"
                align="right"
                :prop="'PV' + (index + 1)"
                :label="'PV' + (index + 1)"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NocheckTree from '../component/NocheckTree.vue'
import {
  getlibianqilistapi,
  getlibiangaikuangapi
} from '@/api/Photovoltaic/monitor/CombinerMonitor'
export default {
  name: 'CallPoliceIndex',
  components: {
    NocheckTree
  },
  data() {
    return {
      isshow: true,
      loading: false,
      entityvalue: {},
      tableData: [],
      xunhuanlist: []
    }
  },

  mounted() {},

  methods: {
    // 树节点点击
    async handleNodeClicks(val) {
      // if (val.className == 'EnergyStorageSystem' || val.className == 'EpowerSystem') {
      const loading = this.$loading({
        lock: true,
        text: 'loading',
        spinner: 'el-icon-loading',
        target: this.$refs.littlexunhuans
      })
      const {
        data: { entity }
      } = await getlibiangaikuangapi({ classId: val.id })
      this.entityvalue = entity
      await this.gettablelist(val)
      loading.close()
      // } else {
      //   this.tableData = []
      //   this.xunhuanlist = []
      //   this.entityvalue={}
      // }
    },
    // 获取表格数据
    async gettablelist(val) {
      this.loading = true
      const res = await getlibianqilistapi({ classId: val.id })
      if(!res.data) {
        this.loading = false;
        this.xunhuanlist =this.tableData=[]
        return 
      }
      this.xunhuanlist = res.data.list
      let newarr = res.data.list
      let modifiedArray = []

      newarr.forEach((item) => {
        let voltageData = item.voltageList
        let currentData = item.currentList

        let newObj1 = {
          id: item.id,
          name: item.name,
          capacity: item.capacity,
          model: item.model,
          power: item.power,
          dayPowerGeneration: item.dayPowerGeneration,
          totalPowerGeneration: item.totalPowerGeneration,
          dayEffectiveHour: item.dayEffectiveHour,
          status: item.status,
          typename: '电压',
          ...voltageData
        }
        modifiedArray.push(newObj1)

        let newObj2 = {
          id: item.id,
          name: item.name,
          capacity: item.capacity,
          model: item.model,
          power: item.power,
          dayPowerGeneration: item.dayPowerGeneration,
          totalPowerGeneration: item.totalPowerGeneration,
          dayEffectiveHour: item.dayEffectiveHour,
          status: item.status,
          typename: '电流',
          ...currentData
        }
        modifiedArray.push(newObj2)
      })

      // 移除重复的对象
      let uniqueModifiedArray = modifiedArray.filter((item, index) => {
        const stringifiedItem = JSON.stringify(item)
        return (
          index ===
          modifiedArray.findIndex((obj) => {
            return JSON.stringify(obj) === stringifiedItem
          })
        )
      })
      this.tableData = modifiedArray
      this.loading = false
    },
    // 合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex < 6) {
        // 检查是否在前六列
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2, // 合并两行
            colspan: 1 // 合并一列
          }
        } else {
          return {
            rowspan: 0, // 不合并
            colspan: 0 // 不合并
          }
        }
      }
    },
    toimg() {
      this.isshow = true
    },
    totab() {
      this.isshow = false
    }
  }
}
</script>

<style scoped lang="scss">
.InverterMonitor {
  height: 100%;
  padding: 10px;
  display: flex;
  .leftbox {
    width: 300px;
    padding: 20px;
    background-color: #fff;
    height: 100%;
    margin-right: 10px;
  }
  .rightbox {
    width: calc(100% - 310px);
    background-color: #fff;
    height: 100%;
    padding: 20px;
    .righttopbo {
      height: 120px;
      display: flex;
      justify-content: space-between;
      .img {
        height: 120px;
        width: 200px;
        img {
          width: 200px !important;
          height: 120px !important;
          object-fit: cover;
        }
      }
      .xiangqing {
        width: calc(100% - 220px);
        display: flex;
        .alitobox {
          width: 20%;
          div {
            text-align: center;
            font-size: 30px;
            font-weight: bold;
            font-style: italic;
            margin: 10px 0;
          }
        }
      }
    }
    .rightbodybox {
      height: calc(100% - 170px);
      .titlea {
        display: flex;
        justify-content: space-between;
        span {
          margin-right: 10px;
        }
        .icon-lingdang,
        .icon-lixian1 {
          font-size: 18px;
        }
        .icon-lingdang {
          color: #e3b11b;
        }
        .icon-zhengchang {
          color: #3ecc6c;
        }
        .click {
          .iconfont {
            margin-right: 10px;
          }
        }
      }
      .xunandtab {
        margin-top: 10px;
        height: 96%;
        /* .xunhuan{
          height: 100%;
        } */
        overflow: auto;
        .libinaqixunhuan {
          margin-bottom: 10px;
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-content: flex-start;
          .empty {
            margin: 0 auto;
          }
          .libinaqilitt {
            height: 140px;
            width: calc(25% - 10px);
            margin: 5px;
            border: 1px solid #b8e412;
            border-radius: 5px;
            padding: 20px 15px;
            display: flex;
            font-weight: bold;
            font-style: italic;
            font-size: 14px;
            .icimg {
              width: 35%;
              .icon-F-fengjinibianqi {
                color: #00c923;
                font-size: 60px;
              }
              .typename {
                margin-top: 8px;
                white-space: nowrap; /* 防止文字换行 */
                overflow: hidden; /* 超出部分隐藏 */
                text-overflow: ellipsis; /* 显示省略号 */
              }
            }
            .gonglv {
              display: flex;
              width: 65%;
              .key {
                width: 50%;
                div {
                  margin-bottom: 15px;
                }
              }
              .value {
                color: #007cee;
                white-space: nowrap; /* 防止文字换行 */
                overflow: hidden; /* 超出部分隐藏 */
                text-overflow: ellipsis; /* 显示省略号 */
              }
            }
          }
        }
      }
    }
  }
}
</style>
